<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    width="30%"
    @close="handleClose">
    <div class="uploadCard">
      <div class="okay" v-if="okay">
        <div class="total">
          <p>导入成功<span class="totalOkay">{{ uploadIsOkayObj.success }}</span>条，失败<span class="totalError">{{ uploadIsOkayObj.fail }}</span>条</p>
        </div>
        <div class="message">
          <p v-for="(item, index) in uploadIsOkayObj.message" :key="index">{{ item }}</p>
        </div>
      </div>
      <el-upload
        v-else
        ref="upload"
        class="upload"
        :limit="1"
        :auto-upload="false"
        :multiple="false"
        drag
        :action="url"
        :on-change="uploadChange"
        :on-success="uploadSuccess"
        >
        <i class="el-icon-upload uploadIcon"></i>
        <div class="el-upload__text">点击或将表格文件拖拽到这里上传</div>
        <div style="color: #b5abab;font-size: 14px">仅支持单个表单文件导入</div>
      </el-upload>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button round v-if="!okay" @click="dialogVisible = false">取消</el-button>
      <el-button round v-if="okay" type="primary" @click="dialogVisible = false">确定</el-button>
      <el-button round v-else :type="file ? 'primary' : 'info'" @click="submitUpload" :disabled="file ? false : true">确定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '导入'
    },
    url: {
      type: String,
      required: true
    },
    fileAccept: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {
      dialogVisible: false,
      file: false,
      okay: false,
      uploadIsOkayObj: {}
    }
  },
  methods: {
    uploadChange (file) {
      if (!this.fileAccept.length || this.fileAccept.includes(file.name.split('.')[file.name.split('.').length - 1])) {
        this.file = file
      } else {
        this.$message.error('只能上传' + this.fileAccept.join('/') + '格式的文件')
        this.$refs.upload.clearFiles()
        this.file = false
      }
    },
    uploadSuccess (response) {
      console.log(response)
      this.okay = true
      this.uploadIsOkayObj = response.data
    },
    submitUpload () {
      this.$refs.upload.submit()
    },
    handleClose () {
      console.log('close')
      this.$refs.upload.clearFiles()
      this.file = false
    }
  }
}
</script>

<style lang="scss" scoped>
.el-dialog__wrapper {
  ::v-deep .el-dialog__body {
    padding: 20px;
    .upload {
      .uploadIcon {
        color: #00BE76;
      }
      .el-upload, .el-upload-dragger{
        width: auto;
      }
      .el-upload-dragger {
        background-color: transparent;
        border: none,
      }
    }
  }
  ::v-deep .el-upload--text {
    display: block;
    height: 139px;
  }
  ::v-deep .el-upload-list {
    display: inline-block;
  }
  ::v-deep .el-dialog__footer {
    padding:  0 20px 30px 20px;
  }
}
.uploadCard{
  padding: 12px 20px 20px;
  line-height: 20px;
  border-radius: 4px;
  border: 1px solid #eaeaea;
  background: #f9f9f9;
  text-align: center;
  color: #332929;
}
.okay {
  min-height: 150px;
  .total {
    font-size: 16px;
    .totalOkay {
      color: green
    }
    .totalError {
      color: red;
    }
  }
  .message {
    color: #b5abab;
    padding-bottom: 5px;
    text-align: start;
  }
}
</style>
